import React, {PureComponent} from 'react';
import {Form, Input, Modal, Select, Steps,} from 'antd';
import DescriptionList from '@/components/DescriptionList';

const {Description} = DescriptionList;
const FormItem = Form.Item;
const {Step} = Steps;
const {TextArea} = Input;
const {Option} = Select;


/**
 * 编辑申请页面
 */
@Form.create()
class EditApplyCreateForm extends PureComponent {

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 18},
    };
  }



  render() {
    const {modalVisible, form, addEditApply, handleModalVisible, record,orgAdmin,} = this.props;
    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        form.resetFields();
        addEditApply(record,fieldsValue);
      });
    };

    let auditUsers = [];
    if (orgAdmin) {
      orgAdmin.forEach(item => {
        auditUsers.push(<Option key={item.userCode}>{item.userName}</Option>);
      });
    }


    return (
      <Modal
        width={640}
        bodyStyle={{padding: '32px 40px 48px'}}
        destroyOnClose
        title="编辑申请"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => handleModalVisible()}
        afterClose={() => handleModalVisible()}
        maskClosable={false}
      >

        <FormItem key="fileName" {...this.formLayout} label="文件名称">
          {record.dirName}
        </FormItem>
        <FormItem key="name" {...this.formLayout} label="编辑事项">
          {form.getFieldDecorator('applyTitle', {
            rules: [{required: true, message: '请输入编辑事项！'}],
          })(<Input placeholder="请输入"/>)}
        </FormItem>
        <FormItem key="desc" {...this.formLayout} label="编辑理由">
          {form.getFieldDecorator('applyReason', {
            rules: [{required: true, message: '请输入至少五个字符的编辑理由！', min: 5}],
          })(<TextArea rows={4} placeholder="请输入至少五个字符"/>)}
        </FormItem>,
        <FormItem label="选择审批人" {...this.formLayout}>
          {form.getFieldDecorator('auditUserCode', {
            rules: [{required: true, message: '请选择审批人',},],
          })(
            <Select
              style={{width: '100%'}}
              placeholder="选择审批人"
            >
              {auditUsers}
            </Select>
          )}
        </FormItem>,

      </Modal>
    );
  }
}

export default EditApplyCreateForm;
